<template>
  <view class="my-page">
    <view class="list">
      <view class="list-item" v-for="i in rows" @click="jumpto(i.act_id)">
		<image class="item-image" src="http://demo.cyyyds.cn/uploads/20250114/4.jpg"></image>
        <view class="item-text">
			<view class="h1">{{i.title}}</view>
			<view class="h2"> 活动时间：{{i.act_time}}</view>
			<view class="h2"> 适合人群：{{i.describ}}</view>
			<view class="button">
				<button v-if="i.status==0" class="mini-btn" type="warn" size="mini" >报 名</button>
				<button v-else-if="i.status==1" class="mini-btn" type="warn" size="mini" plain="true">已约满</button>
				<button v-else-if="i.status==2" class="mini-btn" type="warn" size="mini" plain="true">已结束</button>
				<button v-else-if="i.status==3" class="mini-btn" type="warn" size="mini" plain="true">已取消</button>
			</view>
		</view>
      </view>
    </view>
  </view>
</template>

<script>
	import { getActList } from '@/api/activity.js'
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				total:0,
				rows:[]
			}
		},
		methods: {
			jumpto(id){
				uni.navigateTo({
					url:"/pages/appointment/studydetail?id="+id
				})
			},
			getDataList(){
				getActList(this.page, this.limit).then(res=>{
					this.total = res.total
					this.rows  = res.rows
				})
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:"研学预约"
			})
			// 设置导航栏标题颜色
			uni.setNavigationBarColor({
			  frontColor: '#ffffff',
			  backgroundColor: '#721b28'
			});
			this.getDataList()
		}
	}
</script>

<style lang="scss" scoped>
.my-page {
  .head{
    background: url(http://demo.cyyyds.cn/uploads/20250114/1.jpg);
	background-size: 100% 100%;
    .user-info {
		padding: 50upx 0upx 0upx 0upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.user-icon {
		  width: 130upx;
		  height: 130upx;
		  border-radius: 50%;
		  margin-bottom: 30upx;
		}

		.user-name {
		  color: white;
		  font-size: 36upx;
		  letter-spacing: 5px;
		  font-weight: bold;
		  margin-bottom: 100upx;
		}
		
		.bbb{
			background: white;
			border-top-right-radius: 50upx;
			border-top-left-radius: 50upx;
			height:50upx;
			width: 100%;
			background-size: 100% 100%;
		}

    }
  	
  }
  .list {
	padding: 20upx 30upx;

    .list-item {
		margin-bottom: 50upx;
	  display: flex;
	  justify-content: space-between;
      .item-image{
		width:35%;
		height:200upx;
		border-radius: 10upx;
	  }
      
      .item-text {
		width:64%;
        .h1{
			font-size:26upx;
			font-weight: bold;
			margin-bottom: 20upx;
		}
		.h2{
			font-size:20upx;
			color:#777;
			padding-left:5px;
		}
		.button{
			margin-top: 20upx;
			text-align: right;;
		}
      }
    }
  }
}

</style>
